<template>
  <!-- 黑板画笔 -->
  <canvas id="chalkboard" class="box" />
</template>

<script>
import { init, banca, clearScreen, setsize, setcolor, setOpen } from './painter.js';

export default {
  props: {
    isBanca: Boolean,
    banHaveBan: Boolean,
    isClear: Boolean,
    lineWidth: Number,
    lineColor: String,
    openStatus: Boolean,
  },
  data() {
    return {};
  },
  watch: {
    // 启动板擦
    isBanca(v) {
      banca(v);
    },
    // 启动清屏
    isClear() {
      clearScreen();
    },
    // 画笔宽度
    lineWidth(v) {
      setsize(v);
    },
    // 画笔颜色
    lineColor(v) {
      setcolor(v);
    },
    // 是否启动绘制
    openStatus(v) {
      setOpen(v);
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.listenResize);
  },
  created() {
    // 默认宽高
    window.lineWidth = 4;
    window.lineColor = '#F54B00';
  },
  mounted() {
    this.$nextTick(() => {
      window.boxwidth = document.body.clientWidth;
      window.boxwidthOld = document.body.clientWidth;
      window.removeEventListener('resize', this.listenResize);
      this.listenResize();
    });
  },
  methods: {
    listenResize(e) {
      console.log('run run run run', e);
      window.boxwidth = document.body.clientWidth;
      init('chalkboard');
    },
    clear() {
      clearScreen();
    },
  },
};
</script>

<style lang="scss" scoped>
#chalkboard {
  background: url('../../../assets/teaching/chalkboard.png');
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
}
</style>
